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Abstract. Developing cross- platform mobile mapping applications is a challenge that requires 
good design and a sound understanding of target devices and platform capabilities. Adobe Flash 
Builder and the Adobe I ntegrated Runtime (Al R) framework can be used to author applications 
that will render properly on any device, regardless of its screen resolution and pixel density. 
Based on Adobe Al R, the CartoVista Mobile Software Development Kit (SDK) enables advanced 
mapping for Apple iOS (iPhone, iPad, and iPod), Google Android (Phone and tables) as well as 
Blackberry (PI aybook, BB10) devices. 
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1. Introduction 



You might be surprised when you attempt to access your browser- based web mappi ng site on a 
smart phone and discover that your content is not laid out or perform as you had envisioned; 
and as you try to alter your content so that it's displayed equal ly wel I on the desktop as it is on a 
smart phone or tablet, you wi 1 1 discover that there are some i mportant chal lenges to overcome. 

With the proliferation of smartphones and tablets, mobile applications provide an opportunity 
to deliver the richness of an immersive mapping experience, similar to the desktop, with the 
addition of GPS-enabled functionality. 

1.1. The Mobile Application Design Challenge 

Making your map application device-friendly is quite challenging when you take into 
consi derati on the f ol I owi ng factors. 

1.2. Performance 

Smartphones and tablets have fewer hardware resources than desktop computers today— less 
RAM , CPU power, GPU resources, etc. I n particular, this is an important factor to consider when 
working with complex vector map features and content (e.g. a large layer of polygons). 




Figure 1 Complex Polygon Layer (Demographic Data) 



1.3. Screen size 

As the mobile applications continue to proliferate and reach more devices, developers need to 
adopt techniques for authoring with multiple screen sizes and resolutions in mind. 




Figure 2: Different screen sizes for common mobile devices (From Adobe Systems) 

1.4. Interaction 

The application user interface should anticipate touch- based input accel erometers, screen 
orientation, etc. and shouldn't assume the presence of a physical keyboard or mouse. 




Figure 3: Mobile device interaction: touch-based input 



2. Adobe Flash Builder / Adobe AIR 

Several techniques with in Adobe Flash Builder can help developers author content that wi 1 1 
render properly on any device, regardless of its screen resolution and pixel density. As an open 
source framework, Adobe F I ex offers a very rich environment to help developer design their user 
interface with ease, with a high quality application debugger and profiler. With Adobe Flash 
Bui Ider, mobi I e appl i cations are developed with the same author i ng tools as on the desktop 
(targeting the Adobe Flash Player). This single code base and the ability to reuse assets makes 
optimization easy and simple. 

2.1. Developing with Adobe AIR 

Adobe Al R is a unique stand-alone application development across mobile, desktop, and digital 
home devices. Developing mobi leapps with Adobe Al R makes it possible to create a single 
application that can be deployed across multiple mobilesmartphones and tablets running 
Android, iOS, or BlackBerry 10/Playbook. It is an attractive development platform in part 
because of its broad reach. 

At the same time, each of these environments places a real challenge to create a seamless, 
predictable experience between the end users and your cartographic content. 

Al R makes this possible by providing cross- platform abstractions where they are helpful (such 
as for accessi ng the camera rol I ) , di scoveri ng devi ce properti es dynami cal I y (such as screen 
size), etc. 
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Figure 4: Adobe Flash Builder Interface- Development Tools 



2.1 .1 . Mobile App Design - View-Based Model 

In addition to skinning and extending the core components to work well on mobile devices, Flex 
contains a set of new application components specifically designed to make it easy to build 
applications that follow standard design patterns for touch screen smartphones and tablets. 

Because of the limited screen real estate, applications on these devices are typically structured as 
a series of views, each of which is focused on displaying a single list of data or details about a 
single data item. The user navigates between views by tapping on data items or other controls, 
and goes back by either using on-screen Ul or a hardware "Back" button. Additional actions can 
be provided through on-screen Ul or a menu overlay. 

The following figure illustrates this typical mobile application design pattern. 
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Figure 5: Flex View- based Model for Mobile Applications 

The View component represents a single screen of Ul . Typically, you'll create custom MXM L or 
ActionScript components based on View, and add whatever components you want to appear 
within the content. For example, a shopping cart application might have a home view that 
displays a list of featured items and categories. Tapping on a category navigates to a product list 
view displaying items in a given category, and tapping on a product navigates to a product detail 
view showing information about the product. 

When the user rotates the screen between portrait and landscape orientations, the View is 
automatically resized by default to the appropriate aspect ratio. Asa result, if you use the 
standard Flex layout managers, your application can handle orientation changes with little extra 
work on your part. For finer-grained control, you can use the Flex states mechanism to define 
portrait and landscape states that specify exactly how the View should look in each state. 



When starti ng a new F I ex M obi I e proj ect, tempi ate opti ons are avai I abl e to use the vi ew- based 
model. I n addition to the model you have to pick the target platform for your application, as well 
as several other options. 
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Figure 6: Adobe Flash Builder Mobile Project Settings 

Once you have chosen the vi ew- based model , the mai n vi ew for your appl i cati on i s avai I abl e i n 
MXML. Flex provides both a source and design view which isvery useful when working on 
mobile applications. 



HelloWorld.rnxml ^| HelloWorldHomeView.mxml 



<f>\ Source 
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Figure 7: Basis of a Flex Mobile App in MXML (SourceView) 

When using the design view, you can select the target device and see how your map controls will 
look in your application. 
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Figure8: Flex Mobile App in MXML (Design View) 

Flex includes a series of rich, common mobile controls that are ready to use to define the 
functional ity of your view. 
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Figure9: Flex Mobile Components 
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Figure 10: SourceView - with Components 
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Figure 11: Design view with Components 

When you are ready to test your application, Adobe Flash Builder includes a built-in emulator to 
properly test and debug your application. 



Name: Earthquakes 
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Figure 12: Adobe Flash Builder Interface- Launch configuration for application - 

Desktop Device emulation 




Figure 13: Adobe AIR Emulator (iPhone) 

2.1.2. Screens - Getting information on the device display capabilities and status 

Perhaps the first and most obvious consideration when targeting a mobile device is the screen. It 
is relatively small, both physically and in the number of pixels it can display. It also has a high 
density (pixels per inch), and various devices feature different combinations of densities and 
dimensions. Mobile devices can also beheld in either landscape or portrait orientation. 

To operate across this wide variability in size and density, Adobe Al R supports the following key 
APIs: 



Stage. stageWidth and Stage. stageH eight 


These two properties provide the actual screen 
dimensions at runtime. 


Capabi I i t i es. screen D P I 


This provides the number of pixels per inch on the 
screen . 



By combining the information provided by these properties, an application can adapt its display 
to a wide range of screens— even to sizes and densities not anticipated when it was written. 

Mobile applications need not support screen rotation, but should at least consider that not all 
mobile devices default to portrait (height greater than width) displays. Applications that do not 
want to be aware of screen rotations can opt out entirely by setting <autoOrients>tofalsein 
their application descriptor. 



2.1.3. Map Size and Device Rotation 

On mobile applications, maps are usually designed to take the entire screen real estatein aview. 
Often atop bar is in availableto navigate with in the application and access certain functionality. 
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Figure 14: CartoVista Map with Top Bar and Map Taking Most of the Screen 

When the device is rotated, the map and its layer content needs to resized to fit the new 
orientation. This behavior is handled automatically by Al R if the map component is set to a 



width and height of 100% (width ="100%" height="100% M ) 
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Figure 15: Map Mobile Application - Portrait and Landscape Orientation (Width and 

Height set at 100%) 

2.1.4. Detecting the size of the screen at run time and applying styles with ActionScript 

The fol I owi ng Acti onScri pt fundi ons are used to determi ne if the appl i cati on i s run on a phone 
or a tablet and apply the proper style accordingly. 

import mx. events. FlexEvent; 

protected function screenIsGreaterThan5Inches() :Boolean 
{ 

// Find the physical size in incheSj using the devices real DPI 

var width:Number = this. width / this. runtimeDPI; 

var height : Number = this. height / this. runtimeDPI; 
//this will resolve to the physical size in inches... 

//if greater than 5 incheSj we assume it J s a tablet 
return (width >= 5 | | height >= 5); 

} 



The styles are applied at run time when the application initializes. 



protected function 

viewnavigatorapplication_initializeHandler(event : FlexEvent) : void 

{ 

if (this.screenIsGreaterThan5Inches() == true) 
{ 

this.styleName = "tablet"; 

} 

} 



The styles are defined in the application ess file (default. ess) 



s | ViewNavigatorApplication s| Button {skinClass: 

ClassRef erence( "customSkins . CustomButtonSkin" ) ; colorNormal :#f f f ff f ; colorDown :#7ab4ec} 
s | ViewNavigatorApplication s | ToggleButton {skinClass: 

ClassRef erence( "customSkins . CustomButtonSkin" ) ; colorNormal :#f f f ff f ; colorDown :#7ab4ec} 
s | ViewNavigatorApplication. tablet s| Button {skinClass: 

ClassRef erence( "customSkins . CustomTabletButtonSkin " ) ; colorNormal : #f f f f f f ; colorDown : #7 
ab4ec} 

s | ViewNavigatorApplication. tablet s | ToggleButton {skinClass: 

ClassRef erence( "customSkins . CustomTabletButtonSkin " ) ; colorNormal : #f f f f f f ; colorDown : #7 
ab4ec} 



The user interface components (such buttons) have their skin in actionscript code. The skin 
assets used depends on the application DPI . 



switch (applicationDPI) 

{ 

case DPIClassification.DPI_320: 
{ 

upBorderSkin = 
spark . skins . mobile320 . assets . Button_up; 

downBorderSkin = 
spark . skins . mobile320 . assets . Button_down; 

layoutGap = 10; 

layoutCornerEllipseSize = 20; 

layoutPaddingLeft = 20; 

layoutPaddingRight = 20; 

layoutPaddingTop = 20; 

layoutPaddingBottom = 20; 

layoutBorderSize = 2; 

measuredDef aultWidth = 64; 

measuredDef aultHeight = 86; 

break; 

} 

case DPIClassification.DPI_240: 
{ 

upBorderSkin = 
spark . skins . mobile240 . assets . Button_up; 

downBorderSkin = 
spark . skins . mobile240 . assets . Button_down; 



layoutGap = 7; 

layoutCornerEllipseSize = 15; 
layoutPaddingLeft = 15; 
layoutPaddingRight = 15; 
layoutPaddingTop = 15; 
layoutPaddingBottom = 15; 
layoutBorderSize = 1; 
measuredDef aultWidth = 48; 
measuredDef aultHeight = 65; 



break; 

} 

default: 

{ 

// default DPI_160 
upBorderSkin = 

spark . skins . mobilel60 . assets . Button_up; 

downBorderSkin = 

spark . skins . mobilel60 . assets . Button_down; 



layoutGap = 5; 

layoutCornerEllipseSize = 10; 
layoutPaddingLeft = 10; 
layoutPaddingRight = 10; 
layoutPaddingTop = 10; 
layoutPaddingBottom = 10; 
layoutBorderSize = 1; 
measuredDef aultWidth = 32; 
measuredDef aultHeight = 43; 



break; 

} 

} 



2.2. Mobile Map Content and Performance 

Achieving good performance in mobile map applications is best reached byselectingasolid 
fundamental approach to each aspect of how the map data is stored and most importantly 
rendered. 

2.2.1 . The separation of subject and base map data 

As map data can be very complex by nature, a clear separation of the subject data from the base 
map is thefi rst step to pi an for getti ng decent performance on a mobi I e devi ce. 

Ti led-map deployments have proven to be a very popular method to develop mappi ng 
functionality on the web, GoogleMaps being onethe most popular example of this approach. 
This method of organizing the base map data is also ideal for mobile applications because tiling 
offers many tangi ble benefits: 

• Seaml ess map navi gati on 

• Screen resol uti on i ndependence 

• Low resources consumption 

• Unlimited amount of details 

2.2.2. Overlay of layers of interest 

Setti ng up the base map with ti les al lows focusi ng properly on the layers of i nterest for the 
mobi I e appl i cati on . Th i s i s accompl i shed by over I ayi ng one or more vector I ayers of i nterest on 
top of the map ti les base map. The layers of i nterest are defi ned with the requi red i nteracti vity 
and potential thematic analysis options. 
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Figure 16: Tiled Base Map with Thematic Overlays (Choropleth and PieCharts) 
2.2.3. Map Features (ESRI Shapefiles) 

CartoVista mobile applications can work with both vector and raster (tiles, etc.) data sources. 
Map outputs for mobile applications are produced with the CartoVista Publisher. 
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Figure 17: CartoVista Publisher Map with tiles and vector layer (Census Subdivisions) 

The publisher includes advanced tools to configure the representation of the map layers through 
style classes. 
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Figure 18: CartoVista Publisher - Styles of Map Features- Polygon Style 
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Figure 19: CartoVista Publisher - Layer Properties 



The publisher outputs layers in ESRI Shape File format (.shp). Several options are avail able to 
control the quality of the output (level of generalization) and other layer settings. 



2.2.4. Quad-Tree Index 

The publ i sher map output for mobi I e appl i cati ons i ncl udes a Quad-tree i ndex for better 
performance. The quad-tree is stored in a file with a .qix extension. 
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Figure 20: Quad-tree index for a shape file of the USA 



2.2.5. Rendering - Leveraging the Graphics Processing Unit (GPU) 

The rise of GPUs in recent information technology has essentially inverted the performance 
characteri sti cs of a typi cal renderi ng pi pel i ne. 

When rendered on a CPU, each pixel is expensive. I t's therefore advantageous to render from a 
description of shapes, performing pre-processing such that each pixel on the screen is drawn 
only once. This is the basic approach taken by Adobe Al R when rendering normal vector-based 
content such as map data. However, when working with maps that contain hundreds or 
thousands of features, this approach is simply not a solution because of the rendering overhead. 



A GPU, on the other hand, renders shapes poorly but can easily move enormous numbers of 
pixels around— often, several ti mes more pixels than can actual ly fit on the screen. The best way 
to use aGPU is to th ink about composi ng your graphic content out of a set of bitmaps and then 
restrict yourself to transformations of those bitmaps. 

In AIR, it is possibleto get the best of both worlds. Map developers can use the full capabilities 
of the Al R rendering model to draw and then cache the result as a bitmap that can be efficiently 
rendered to the screen. 

I n CartoVista for example, the BitmapData.drawQ is one of the useful methods to get fast map 
feature drawi ng whi le mai ntai ni ng decent performance and footpri nt. 

2.2.6. Memory on mobile device is different 

Although today's mobi I e devices contai n plenty of RAM , it is key to remember that they do not 
use the same memory management model as tradi ti onal desktop operati ng systems. On the 
desktop, if memory requi rements are exceeded, the contents of memory can be spi I led to disk 
and then brought back in to memory later. This enables the operating system to keep an 
effectively unlimited number of programs running at once. 

On mobile devices, this spill-to-disk approach is simply not available. Instead, if the demand for 
memory exceeds what is physically available, background applications are forced to exit, thus 
freei ng up the memory they were usi ng. I f a request for memory cannot be satisfied at al I, then 
the requesting application itself is exited. 

Mobileapp developers should strive to use as little memory as possible when it's in the 
background. Explicit memory management is also critical when dealing with multiples of a given 
object. For example, if your map application loads a set of complex vector objects, if written 
naively, your application will always run out of memory when that set is too large. On the other 
hand, if the implementation caps the number of objects that can bein memory at any one time, 
it wi 1 1 not run out of memory no matter how large the set of feature objects is. This can be 
achieved by freeing up an old feature before loading a new one or, even more efficiently, by 
keepi ng a fixed number of features i n memory and cycl i ng features through them. 



2.3. Map Navigation and Basic User Controls 

Today's smartphones and tablets are becoming predominantly touch-screen devices for any 
native applications. This is a key concept for mapping applications to enable simple and 
straightforward map navigation. The Adobe Al R gesture support allows zooming and panning 
the map whi le taki ng advantage of the di rect tacti I e experience that touch screens enables. 

I n Adobe Al R, the GestureE vent and TouchEvent class lets developer handle complex 
movement i nput events (such as movi ng fi ngers across a touch screen) that the device or 
operating system interprets as a gesture. Developers can use the properties and methods of 
these classes to construct event handlers that respond to the user touchi ng the device. 

It is also possible to use the M ultitouch class to determine the current environment's support for 
touch interaction, and to manage the support of touch interaction if the current environment 
supports it. 

2.3.1. Navigating the map with gestures on smartphones 

The following map navigation methods are common and fully supported on almost all smart 
phone devices on the market. The foil owing methods are supported by Adobe Al R and the 
CartoVista Mobile SDK (except rotation). 



One- Finger Drag 




MAP ACTI ON : Recenter 

This common gesture used also for 
media content (images, etc.) allows to 
recenter the content vi ew by a si mpl e 
drag. To drag, users place a f i nger on the 
screen and move it i n the desi red 
direction without lifting it from the 

screen . 



Two- F i nger Zoom- 1 n 




MAP ACTION: Zoom in 

This common gesture used also for 
media content (images, etc.) allows 
zooming in the content. This gesture is 
executed by movi ng two f i ngers farther 
apart on the device (pinch open). 



i wo-r i nger z.oom-uut 






MAP ACTI ON : Zoom out 

This common gesture used also for 
meai a content (images, etc.; anows 
zooming out of the content. This gesture 
i s executed by movi ng two f i ngers cl oser 
together on the device (pinch close). 


une- ringer uouoie i ap 


I 






MAP ACTION: Zoom in 

This user gesture is commonly used to 
zoom in or content or an image, a aouDie 
tap consists of two quick taps. On the 
map, one finger double tap allows 
zoomi ng- i n by factor of 2 . 


i wo-r i nger i ap 
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MAP ACTI ON : Zoom out 

This user gesture is commonly used to 
zoom out of content or an image. On the 
map, two-f i nger tap al lows zoomi ng-out 

by factor of 2. 


i wo- ringer uouoie i ap 
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MAP ACTI ON : Zoom out 

This user gesture is commonly used to 
zoom out or content or an image quicKiy. 

A double tap consists of two quick taps. 
On the map, two-finger double tap 
al lows zoomi ng-out by factor of 4. 







M AP ACTI ON: Get i nformati on on map 
feature (Attri bute 1 nfo) 


une-r inger i ap 




A user gesture used to display an 
information bubble, magnify content 

unaer men nger, or to pertorm specitic 
actions in built-in applications and 

features. To touch and hold, users touch 

fhp crrppn 1 pa\/i nfl tblPI f f 1 nflPf 
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motionless until the information is 
displayed or the action occurs. 






MAP ACTION: Not available 


i wo-r i nger k orate 




This gesture is commonly used to rotate 
an obj ect by movi ng two f i ngers i n a 
circular motion. SinceCartoVista does 

not support rotation this is not 
implemented but is available in Adobe 

AIR. 



2.3.2. Navigating the map with gestures on tablets 



Tablets have more real screen real estate so that they are wel I suited for supporti ng additional 
i nteracti on, on top of the smartphone-type i nteracti ons seen above. On a tabl et, the i nteracti on 
is not limited to one hand. Both hands and fingers can be used simultaneously to navigate the 
map. 







MAP ACTI ON : Recenter 


Single-Hand 
Drag 


This hand gesture used also for media 
content (images, etc.) allows to recenter 

the content view by a si mple drag. To 
drag, users pi ace the hand fingers on the 

screen and move them in the desired 
direction without lifting from the screen. 







MAP ACTION: Zoom in 


Two- Hands 
Zoom- In 




This common qesture used also for 
media content (images, etc.) allows 
zooming in the content. This gesture is 
executed by movi ng two hands f i nqers 
farther apart on the device. 






MAP ACTI ON : Zoom out 


— i— 1 1 ■ 
Two- Hands 

Zoom- Out 


i 1 

I L -J 


This hand qesture used also for media 

content ( i mages, etc. ) al I ows zoomi ng 

out of the content. This gesture is 
■ 1 1 ■ ■ i ■ ■ ■ 
executed by movi ng the two hands 

fi ngers closer together on the device. 






MAP ACTION: Not available 


—i— ■ ■ ■ 
Two- Hands 

Rotate 




This gesture is commonly used to rotate 

an object by movi ng two hands i n a 
circular motion. SinceCartoVista does 

not support rotation this is not 
implemented but is available in Adobe 

AIR. 



2.3.3. Sample ActionScript Code 

The foil owing code shows how the two finger tap gesture is captured in ActionScript and 
mapped to the CartoVista zoom out event. 

protected function onGestureTwoFingerTap(event :GestureEvent) :void 

{ 

var point :Point = new Point(this. map. width / 2, this. map. height / 2); 
MapEventManager . get Instance (this .map) .dispatch Event (new ZoomByAbout Event ( pointy 
this.TWO_FINGER_TAP_ZOOI v l_FACTOR J false, false)); 

event . updateAf terEvent ( ) ; 

} 



2.3.4. Other Common Mobile Gestures 

M obi I e appl i cation users also expect support for other common mobi I e gestures such as swi pi ng, 
flipping and panning when working with map user controls (legends, information windows, etc). 



One- F i nger Swi pe ( F 1 i ck) 






This user gesture is used to scrol 1 
or pan quickly. To flick, users 

place a f i nger on the screen and 
quickly swipe it in the desired 
direction. This is also used for 
other actions (menus, etc.). 


Two- F i nger Swi pe ( Scrol 1 ) 


1 


i 


This user gesture used to scroll 

content in an element with 
overflow capability or a scrollable 
inline frame el ement. A two-f i nger 

scroll is a drag performed with 
two f i ngers movi ng together i n the 
same direction. 


Three-Finger Pan 
(Aggressive) 






Move three fingers in a horizontal 
line to pan an object in theX 

plane. 


Three- Finger Tilt 
(Aggressive) 




it 

V 


M ove three f i ngers i n a verti cal 
line to tilt an object in theY plane. 



2.3.5. Mobile User Controls 

TheCartoVista mobileSDK includesatop bar with simpletools: 



• A Theme and Layer Control to turn map layers on or off or choose a theme set 

• A Legend menu to display the map legend i n the i nterface 

• A Search menu to search for map features 

• A Locate Me bottom to use the GPS to show the current location on the map. 




¥ 



Figure 21: CartoVista Mobile Sample Map: Range Thematic Analysis- iPad Device- 
Gestu re-based map navigation and use of icons for menus and actions 




Figure 22: CartoVista Mobile Sample Map: Range Thematic Analysis- Legend / Theme 

Selection and Layer Control - i Phone Device. 



2.4. Searching and Querying 

When worki ng with the map, mobi le end users are expecti ng to be able to tap on map features to 
retri eve attri bute i nf ormati on . Cal I out components are avai I abl e i n the Adobe M obi I e framework 
to provide rich data tips while views can be used to layout detailed information about map 
features. 



at&t a a @ Q D ^ EH .ii ■ iso 
Ho me View 



Select the button to open the callout 



| Open cal lout 




Figure 23: Cal lout Component in Adobe Flex 4.6 



<?xml version="l . 0" encoding="utf-8"?> 




< ! — componen t s \mobil e \ vi ews \ CalloutBut t onSimpl eHomeVi ew 


. mxml — > 


<s : View xmlns : fx= "http : //ns . adobe . com/mxml/2009 " 




xmlns : s= "library : //ns . adobe . com/ flex/ spark " 




title="HomeView"> 




<s : layout> 




<s : Vert icalLay out 




paddingLeft= "1 " paddingTop= "1 "/> 




</s : layout > 




<s : Label text= "Select the button to open the callout 


"/> 


<s : CalloutButton id= "myCB " 




horizontalPosition=" end" 




verticalPosition=" after " 




label="Open callout "> 




<s : calloutLayout> 




<s : HorizontalLayout/> 




</s : calloutLayout> 




<! — Define buttons that appear in the callout. 


— > 


<s: Button label="OK" 




click= "myCB . closeDropDown () ; "/> 




<s -.Button label= "Cancel" 




click= "myCB . closeDropDown () ; "/> 




</s : CalloutButton> 




</s : View> 






Figure 24: CartoVista Mobile Sample Map: Earthquake Map- DataTips- Detailed Info 

Window - i Phone Device. 



When it comes to provide searchi ng capabi I i ties, the end user experience can be greatly 
enhanced if the interface provides suggestions as the user is typing. The Adobe AIR includes full 
access to the native keyboard of the device. 




Figure 25: CartoVista Mobile Sample Map: Search by Municipalities- iPhone Device 

When working with vector map features, spatial indexing (e.g. Quad-tree, R-Tree) is a 
recommended approach to help ensure that the map querying and drawing is optimized for 
speed. For example, only drawing features that are visible in the current view can helpsaveon 
memory/ graph i cs f ootpri nt of your mappi ng appl i cati on . 



2.5. Using Local Data & Accessing the GPS/Cameras on the Mobile Device 
2.5.1. Local Device Storage 

M obi I e devi ces provi de I ocal f i I e systems that appl i cati ons can use to store preferences, 
documents, and the like. I n general, applications should assume that this storage is accessible 
only to the app itself and cannot be shared with other apps. This storage can be accessed on al I 
platforms via the FilaapplicationStorageDi rectory property in Adobe Al R. 

Being ableto work with a mapping application without relying on a network connection is an 
important advantage, especially for data entry related operations in the field or disconnected 
data querying. 

Packagi ng data local I y is possi ble i n Adobe Al R usi ng fi les or with a SQLite database. M ap ti les 
can also be installed in a SQLite database that can be packaged with an application to run locally 
without a network connection. 
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Figure 26: Data Entry Application: Enter Point on the map for local storage 

2.5.2. Accessing the Mobile Device Camera (CameraUl and CameraRoll) 

When it comes to taki ng pictures, the question for mobi I e devices these days is not whether they 
have a camera, but how many cameras they have. Al R for mobi I e i ncl udes si mple API s provi di ng 
integration both with the cameras and with any photos already stored on the device. 

Built-in camera functionality is accessed via the new CameraUl class. As the name suggests, this 
differs from the fami I iar Camera class i n that it is an API to the camera's user i nterface, not to 
the camera directly. Dependi ng on the device, this means the user may have the abi I ity to select 
between still and video recording, select different resolutions, turn theflash on or off, select 
between front and rear cameras, and so on. 



Mobile devices not only take pictures but also store them. The user's library of recorded images 
can be accessed via the CameraRoll class. The browseForl mageQ method can be used to open 
the device's standard Ul for selecting an image from the library. The camera roll is also writable: 
images can be stored tothelibrary viatheaddBitmapDataQ method. 
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Figure 27: Field Data Entry Application with access to Camera (Take Picture) or existing 

photos (Choose from Gallery) 

2.5.3. Using the device GPS with the GeoLocation API 

TheGeolocation API in Adobe Al R provides a high-level interface to access the geographical 
location information of the mobile device. The geographical location can be displayed on the 
device in theform of latitude and longitude coordinates. The API is designed to enable both one- 
shot location request and repeated location updates (useful while building a Geo tracking 
application). 

I n your device, when its location changes, your application can receive updates about the 
changes, including information on altitude, accuracy, heading, speed, and timestamp using one 
of the foil owing location sources: 

GPS Satellites: Enables accurate positioning if a GPS sensor is available. 



Wireless networks: Enables approximate positioning if a data connection is available. 



2.5.4. Code sample in ActionScript to read the device GPS data 



First a listener is setup for the GeoLocationEvent.il PDATE event. Thefunction updateLocation 
is called to display the current location on the map. 

private function startTracking() :void 

{ 

this . geo . add Event Listener (Geolocat ion Event . UPDATE , 
updateLocation., false, 0., true); 

this._centerOnPosition = true; 



NativeApplication . nativeApplication . add Event Listener (Event . DEACTIVATE , 
onAppInterruption) ; 

NativeApplication . nativeApplication . addEventListener(Event . ACTIVATE , onAppActivate) ; 

this . btnLocateMe . setStyle( "color" , 0xFF0000) ; 

} 



Then the updateLocation function received the event evaluates the accuracy and updates the 
position of the point location on the map. 

private function updateLocation(geoEvent :GeolocationEvent) :void 

{ 

//Deai with the accuracy.... 

if (geoEvent . verticalAccuracy >= 500 && geoEvent.horizontalAccuracy >= 500) 

this.btnLocateMe.setStyle("color" J 0xFF8C00); 
else if (geoEvent .verticalAccuracy >= 100 && geoEvent.horizontalAccuracy >= 100) 

this.btnLocateMe.setStyleC'color", 0XE1FF00); 
else if (geoEvent .verticalAccuracy < 100 && geoEvent.horizontalAccuracy < 100) 

this.btnLocateMe.setStyle("color", 0XA0FF00); 
else if (geoEvent .verticalAccuracy < 50 && geoEvent.horizontalAccuracy < 50) 

this.btnLocateMe.setStyle("color", 0X00FF00); 



//Add and update point position 
if ( ! this._currentPositionPoint) 

{ 

if ( !this._featureFactory) 
{ 

this ._f eatureFactory = new FeatureFactory (this. map); 

} 

this ,_currentPositionPoint = this ._f eatureFactory . createlmagePoint Feature (id , 



geoEvent . longitude , geoEvent . latitude, true, _currentPositionLayer, 
_currentPositionStyle) ; 

} 

else 

{ 

this._f eat ureFactory . posit ionPoint Feat ureWithLat Long (this ._current Posit ionPoint, 
geoEvent . longitude, geoEvent . latitude, _c ur rent Posit ion Layer . isReprojectable); 

} 

// Put visibLe features that are within the map extents 
// Update visibiLity of this Layer 

this ._current Posit ion Layer . updateFeaturesAndVisibility ( ) ; 

this._currentAccuracy = (geoEvent . horizontalAccuracy + geoEvent . verticalAccuracy) / 

2; 

this . updateCur rent Posit ion ( ) ; 

//Center on the point 

if (this._centerOnPosition) 

{ 

//Check if point is not outside the maximumExtent of the map 
var mapExtent : Extent = this. map. maximumExtents; 
if (mapExtent) 

{ 

if ( ! (this._currentPositionPoint .cX > mapExtent .maxX || 

this._currentPositionPoint.cX < mapExtent .minX | 1 this._currentPositionPoint .cY > 
mapExtent .maxY | | this._currentPositionPoint .cY < mapExtent. minY)) 

{ 

this. map. centerOnFeatu re (this. _current Posit ionPoint); 

if (geoEvent .verticalAccuracy < 100 && geoEvent .horizontalAccuracy < 100) 
{ 

this._centerOnPosition = false; 

//Check if point is still outside the maximumExtent of the map 
var mapExtent2: Extent = this. map. maximumExtents; 
if (mapExtent2) 

{ 

if (this._currentPositionPoint .cX > mapExtent2.maxX 1 | 
this._currentPositionPoint.cX < mapExtent2.minX | | this._currentPositionPoint .cY > 
mapExtent2.maxY | | this._currentPositionPoint .cY < mapExtent2.minY) 

{ 

this . stopTracking( ) ; 

this . btnLocateMe . setStyle( "color" , 0XCECECE) ; 

} 

} 

} 

} 





Figure 28: CartoVista MobileSample Map: Detailed street map tileand GPS (Locate Me) 

Button - iPhone Device 

2.6. Deploying your mobile application 

I n the mobilespace, deployment happens primarily via app marketplaces. All marketplaces 
includeon-device functionality for discovering, installing, and updating them. 

Al R applications are prepared for deployment to a particular marketplace by packaging them in 
the appropriate platform- specific format. 

For example, developers should package their application as an .ipafilefor uploading to the 
AppleApp Store and as an .apkfilefor uploading to an Android marketplace. These options are 
avail able from within Flash Builder, or can be scripted vi a the ADT command- line tool. 

Al I mobi I e appl i cati on marketpl aces requ i re that appl i cati ons be si gned that are publ i shed to 
them. For iOS, signing must occur with a certificate issued by Apple. For Android devices, 
developers should create a self- sign certificate and must use the same certificate to sign all 
updates to thei r appl i cati on . 

The CartoVista Mobile application is available on the foil owing app marketplaces: 

• Appl e App Store ( i OS) : 
( https://itunes.apple.com/ca/app/cartovista/id6183902647mt =8 ) 

• Google Play store (Android): 

( https:/ / pi ay.gooql e.com/ store/ apps/ detai I s?i d =ai r .com.dbxgeomati cs.cartovi sta ) . 

• B I ackber ry Wor I d ( B I ackber ry 10 / P I aybook) : 
( http://appworld.blackberry.com/ webstore/ content/ 25893905/ ) . 



3. Conclusion 



Thi s paper has wal ked through the steps necessary to el i mi nate the vari ous potenti al poi nts of 
variation so that developers can think about creating a mobile mapping experience that is 
si mi lar what users can f i nd on the desktop, whi le leveragi ng the i nnovati ve capabi I i ties of mobi le 
devices. 

The combination of Adobe I ntegrated Runtime (Al R) and CartoVista offers a rich development 
environment that enables reaching all of the major mobile platforms while building expressive, 
compel ling mappi ng appl i cati ons. 

Developers and Gl S specialists can think about building their own engaging mobileapps with a 
single code- base that works with most emerging hardware and new form-factors. 

The methods and code samples in this presentation will help developers and cartographers 
understand how to build map applications that are well -suited for mobile and tablet devices 
whi le leveragi ng the benefits of today's mobi I ity. 
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